<div class="task-border mt-4">
  @if (Object.keys(activeTasks).length > 0) {
    @for (task of activeTasks | keyvalue; track task; let idx = $index) {
      <div class="task-card p-4">

        <div class="flex items-center justify-between mb-2">
          <p class="text-sm font-semibold text-[var(--primary-color)]">Metadata Fetch Task</p>
          <p-tag
            [value]="getStatusLabel(task.value.status)"
            [severity]="getTagSeverity(task.value.status)"
            class="text-xs"
          ></p-tag>
        </div>

        <div class="task-message text-gray-200">
          {{ task.value.message }}
        </div>

        <div class="task-progress-info text-sm text-gray-300">
          Book <strong>{{ task.value.status === 'COMPLETED' || task.value.completed >= task.value.total ? task.value.total : task.value.completed + 1 }}</strong>
          of {{ task.value.total }}
        </div>

        <p-progressBar
          [style]="{ height: '15px' }"
          [value]="getProgressPercent(task.value)"
          [showValue]="true">
        </p-progressBar>

        @if (task.value.status === 'COMPLETED' || task.value.status === 'ERROR') {
          <div class="action-buttons mt-4 flex justify-end gap-2">
            <p-button
              label="Review"
              severity="info"
              icon="pi pi-search"
              size="small"
              outlined
              (click)="reviewTask(task.key)">
            </p-button>

            <p-button
              label="Discard"
              icon="pi pi-times"
              severity="danger"
              size="small"
              pTooltip="Deletes the fetched metadata"
              tooltipPosition="top"
              outlined
              (click)="clearTask(task.key)">
            </p-button>
          </div>
        }
      </div>

      @if (idx < Object.keys(activeTasks).length - 1) {
        <p-divider></p-divider>
      }
    }
  }
</div>
